<template>
  <uni-popup ref="popup" type="center" :is-mask-click="false">
    <view class="dialog-container">
      <!-- 标题 -->
      <view class="dialog-title"
        >查看处理过程
        <uni-icons
          class="close"
          type="closeempty"
          size="21"
          color="#ffffff"
          @click="close"
        ></uni-icons>
      </view>
      <view class="timeline-container">
        <view
          class="timeline-item"
          v-for="(item, index) in dealList"
          :key="index"
        >
          <!-- 时间轴节点 -->
          <view class="timeline-node">
            <view
              class="dot-img"
              :class="{ 'last-item': index === dealList.length - 1 }"
            ></view>
          </view>

          <!-- 右侧内容区域 -->
          <view class="timeline-content">
            <view class="alarm-info">
              <text class="alarm-type">{{ item.type }}</text>
              <view class="alarm-other-info">
                <view class="info-item">
                  <text class="info-label">告警时间：</text>
                  <text class="info-value">{{ item.time }}</text>
                </view>
                <view
                  class="info-item"
                  v-for="(val, key) in item.otherData"
                  :key="key"
                >
                  <text class="info-label">{{ key }}：</text>
                  <text class="info-value">{{ val }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
import { ref } from "vue";

const popup = ref();
// 移除示例数据，使用传递进来的数据
const dealList = ref<any[]>([]);

// 打开弹窗
const open = (data: any[]) => {
  // 更新 dealList 为传递进来的数据
  dealList.value = data;
  popup.value.open();
};

// 关闭弹窗
const close = () => {
  popup.value.close();
};

// 接口定义保持不变
interface TimelineItem {
  time: string;
  type: string;
  otherData: Record<string, string>;
}

defineExpose({ open });
</script>

<style lang="scss" scoped>
.dialog-container {
  width: 650rpx;
  background: #fff;
  max-height: 80vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .dialog-title {
    font-weight: 500;
    font-size: 32rpx;
    color: #ffffff;
    font-weight: bold;
    margin-bottom: 24rpx;
    height: 85rpx;
    line-height: 85rpx !important;
    text-align: center;
    background: #5e93ff;
    position: relative;
    .close {
      position: absolute;
      right: 20rpx;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .timeline-container {
    padding: 20rpx;
    flex: 1;
    overflow: auto;
  }

  .timeline-item {
    display: flex;
    padding-bottom: 30rpx;
    position: relative;

    .timestamp {
      width: 200rpx;
      text-align: right;
      padding-right: 40rpx;
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
    }

    .timeline-node {
      position: relative;
      width: 60rpx;
      display: flex;
      justify-content: center;
      &::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50rpx;
        bottom: -10rpx;
        width: 2rpx;
        background-color: #e4e7ed;
        transform: translateX(-50%);
      }

      .dot-img {
        width: 50rpx;
        height: 50rpx;
        background: url("@/static/images/icon-13.png") no-repeat center/cover;
        position: relative;
        z-index: 1;
        top: -8rpx;

        &.last-item {
          background-image: url("@/static/images/icon-14.png");
        }
      }
    }

    &:last-child .timeline-node::after {
      display: none;
    }
  }
  .timeline-content {
    flex: 1;
  }

  .alarm-info {
    .alarm-type {
      font-weight: 500;
      font-size: 28rpx;
      color: #333;
      margin-bottom: 20rpx;
      display: block;
    }

    .alarm-other-info {
      background: #f3f6fd;
      border-radius: 16rpx;
      padding: 20rpx;

      .info-item {
        font-size: 26rpx;
        line-height: 1.8;
        color: #666;

        .info-label {
          font-weight: 400;
        }

        .info-value {
          color: #333;
        }
      }
    }
  }
}
</style>
